<template>
    <view class="home">
        <!-- 导航栏 -->
        <uni-nav-bar fontSize="60" backgroundColor="none" :shadow="false" leftWidth="250rpx" rightWidth="250rpx"
            :border="false">
            <block slot="left">
                <image class="homehl-img" src="@/static/images/homehl.png" mode="widthFix"></image>
            </block>
            <view class="uni-title">标题栏</view>
            <block slot="right">
                <view class="nav-location" @click="handLocation">
                    <image class="location-img" src="@/static/images/location.png" mode="widthFix"></image>
                    <view class="location-text">北京</view>
                </view>
            </block>
        </uni-nav-bar>
        <view class="content">
            <!-- 轮播图 -->
            <uni-swiper-dot class="uni-swiper-dot-box" :dotsStyles="dotsStyles" :info="data" :current="current"
                field="content">
                <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
                    <swiper-item v-for="(item, index) in data" :key="index">
                        <view class="swiper-item" @click="clickBannerItem(item)">
                            <!-- <view class="swiper-text">
                                <view class="big">机器人新年团购，火热进行中一起拼团吧！机器人新年团购，火热进行中一起拼团吧！</view>
                                <view class="small">主打优惠，放心选车不踩坑</view>
                            </view> -->
                            <image :src="item.image" mode="aspectFill" :draggable="false" />
                        </view>
                    </swiper-item>
                </swiper>
            </uni-swiper-dot>
            <!-- 甄品惠购 -->
            <view class="home-block home-block1 mt30">
                <view class="block-title">
                    <image class="title-left" src="~@/static/images/title1.png" mode="widthFix" />
                    <view class="title-right">
                        <text class="text">更多车源</text>
                        <image class="arrow" src="~@/static/images/arrow.png" mode="widthFix" />
                    </view>
                </view>
                <!-- 列表 -->
                <view class="zp-list">
                    <view class="zp-list-item" v-for="(item, index) in zhenPinList" :key="index">
                        <view class="left">
                            <image v-if="item.bigImageUrl" class="big-image" :src="item.bigImageUrl" mode="aspectFill">
                            </image>
                            <image v-else class="big-image" src="~@/static/images/noimg.jpg" mode="aspectFill"></image>
                            <image v-if="item.status == 1" class="status-image" src="~@/static/images/pt.png"
                                mode="aspectFill"></image>
                            <image v-else class="status-image" src="/static/images/yh.png" mode="aspectFill"></image>
                        </view>
                        <view class="right">
                            <view class="title uni-ellipsis-1">{{ item.title }}</view>
                            <view class="subtitle uni-ellipsis-1">{{ item.subtitle }}</view>
                            <view class="button" @click="goToDetail(item)">查看详情</view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 广告位 -->
            <view class="adv">
                <image class="adv-img" src="/static/images/homeadv.png" mode="aspectFill"></image>
            </view>
            <!-- 选车用车 -->
            <view class="home-block home-block2 mt30">
                <view class="block-title">
                    <image class="title-left" src="@/static/images/title2.png" mode="widthFix" />
                    <view class="title-right" @click="chooseCar">
                        <text class="text">更多</text>
                        <image class="arrow" src="@/static/images/arrow.png" mode="widthFix" />
                    </view>
                </view>
                <!-- 列表 -->
                <view class="zp-list">
                    <view class="zp-list-item" v-for="(item, index) in carSelectList" :key="index"
                        @click="goToDetail(item)">
                        <view class="left">
                            <image v-if="item.bigImageUrl" class="big-image" :src="item.bigImageUrl" mode="aspectFill">
                            </image>
                            <image v-else class="big-image" src="~@/static/images/noimg.jpg" mode="aspectFill"></image>
                        </view>
                        <view class="right">
                            <view class="title2 uni-ellipsis-2">{{ item.title }}</view>
                            <view class="list-tag">
                                <uni-tag :text="item.tagtext"
                                    custom-style="background-color: #F3F3F3; color: #8B8994; border:none;" />
                                <text class="text">14K</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            banner01: require('@/static/images/banner/banner01.jpg'),
            current: 0,
            swiperDotIndex: 0,
            data: [
                {
                    image: '/static/images/banner/banner01.jpg'
                },
                {
                    image: '/static/images/banner/banner02.jpg'
                },
                {
                    image: '/static/images/banner/banner03.jpg'
                }
            ],
            dotsStyles: {
                width: 4,
                bottom: 5,
                color: '#fff',
                backgroundColor: 'rgba(255, 255, 255, .56)',
                selectedBackgroundColor: '#FFAE00',
                right: 10
            },
            zhenPinList: [
                {
                    id: 1,
                    bigImageUrl: "/static/images/car1.jpg",
                    status: 1,
                    title: "比亚迪海豹",
                    subtitle: "科技配置丰富，操控性能出色，适合年轻群体",
                },
                {
                    id: 2,
                    bigImageUrl: "/static/images/car2.jpg",
                    status: 2,
                    title: "这是一个大标题这是一个大标题这是一个大标题这是一个大标题啊",
                    subtitle: "这是一个小标题",
                },
                {
                    id: 3,
                    bigImageUrl: "/static/images/car1.jpg",
                    status: 1,
                    title: "比亚迪海豹",
                    subtitle: "科技配置丰富，操控性能出色，适合年轻群体",
                },
            ],
            carSelectList: [
                {
                    id: 1,
                    bigImageUrl: "/static/images/car1.jpg",
                    status: 1,
                    title: "比亚迪海豹",
                    subtitle: "科技配置丰富，操控性能出色，适合年轻群体",
                    tagtext: '选车宝典'
                },
                {
                    id: 2,
                    bigImageUrl: "/static/images/car2.jpg",
                    status: 2,
                    title: "这是一个大标题这是一个大标题这是一个大标题这是一个大标题啊",
                    subtitle: "这是一个小标题",
                    tagtext: '选车宝典'
                },
                {
                    id: 3,
                    bigImageUrl: "/static/images/car1.jpg",
                    status: 1,
                    title: "比亚迪海豹",
                    subtitle: "科技配置丰富，操控性能出色，适合年轻群体",
                    tagtext: '选车宝典'
                },
            ],
        }
    },
    onLoad() {
    },
    methods: {
        handLocation() { },
        clickBannerItem(item) {
            console.info(item)
        },
        changeSwiper(e) {
            this.current = e.detail.current
        },
        goToDetail(item) {
            this.$tab.navigateTo(`/pages/vehicleDetails/index?id=${item.id}`);
        },
        chooseCar() {
            this.$tab.navigateTo(`/pages/chooseCar/index`);
        }
    }
}
</script>

<style lang="scss" scoped>
page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: #fff url('~@/static/images/homebg.png');
    min-height: 100%;
    height: auto;
    background-size: cover;
    background-position: center;
    padding: 32rpx 32rpx;
}
</style>
